<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
    <Modal
        v-model="modal"
        title="登记患者"
        @on-ok="ok"
        :mask-closable="false"
        draggable
        @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <FormItem label="患者姓名：" prop="user_name">
                    <Input v-model="formValidate.user_name" placeholder="请输入患者姓名"></Input>
                </FormItem>
                <FormItem label="手机号：" prop="mobile">
                    <Row type="flex">
                        <Col span="8">
                            <Input v-width="150" v-model="formValidate.mobile" maxlength="11" placeholder="请输入手机号"></Input >
                        </Col>
                        <Col span="8" style="text-align: right;padding-right:16px"><span>微信号：</span></Col>
                        <Col span="8">
                            <Input v-model="formValidate.wx_name" placeholder="请输入微信号"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="年龄：">
                    <Row>
                        <Col span="11">
                            <DatePicker type="year" :options="options" @on-change="handleChangeBirthday" placeholder="出生年份" v-model="formValidate.birthday"></DatePicker>
                        </Col>
                        <Col span="2" style="text-align: center">-</Col>
                        <Col span="11">
                            <InputNumber  @on-blur="inputblurmin(formValidate.age)" v-model="formValidate.age" :min="0" placeholder="年龄" :formatter="ins"></InputNumber >
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="性别：" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="1">男</Radio>
                        <Radio label="2">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="来源：">
                    <Select v-model="formValidate.source_channel_id" clearable placeholder="渠道">
                        <Option v-for="item in channel" :value="item.id" :key="item.id" :disabled="+item.status === 0">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="居住城市：">
                    <Select clearable v-model="formValidate.city_id" placeholder="请输入城市拼音简写" filterable remote :remote-method="handleQueryText">
                        <Option v-for="item in city_list" :key="item.id" :value="item.key">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="诊室：" prop="clinic_id">
                    <Select v-model="formValidate.clinic_id" clearable placeholder="请选择诊室">
                        <Option v-for="item in clinic_list" :value="item.id" :key="item.id" :disabled="+item.status === 0">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="诊疗号：" prop="patient_card_id">
                     <Input v-model="formValidate.patient_card_id" placeholder="请输入诊疗号"></Input>
                </FormItem>
                <FormItem label="备注：">
                    <Input type="textarea" v-model="formValidate.remark" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
    </Modal>
</template>

<script>
    import { searchCity, patientindexpatientadd } from '@/api/patient'
    export default {
        props: ["channel", "clinic_list"],
        data () {
            return {
                modal: false,
                options:  {
                    disabledDate (date) {
                        return date && date.valueOf() >= Date.now()
                    }
                },
                formValidate:{
                    user_name: '',
                    gender: '',
                    clinic_id: '',
                    patient_card_id: '',
                    mobile: '',
                    wx_name: '',
                    birthday: '',
                    age: null,
                    source_channel_id: '',
                    city_id: '',
                    remark: '',
                },
                ruleValidate: {
                    user_name: [
                        { required: true, message: '请输入患者姓名', trigger: 'blur' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    clinic_id: [
                        { required: true, message: '请选择诊室', trigger: 'change' }
                    ],
                    patient_card_id: [
                        { required: true, message: '请输入诊疗号', trigger: 'blur' }
                    ],
                },
                city_list:[]
            };
        },
        methods: {
            ok () {
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        let city_id = this.formValidate.city_id.match(/\d+/g)

                        let config = {
                            user_name: this.formValidate.user_name,
                            gender: this.formValidate.gender,
                            clinic_id: this.formValidate.clinic_id,
                            patient_card_id: this.formValidate.patient_card_id,
                            mobile: this.formValidate.mobile,
                            wx_name: this.formValidate.wx_name,
                            age: this.formValidate.age,
                            source_channel_id: this.formValidate.source_channel_id,
                            city_id: city_id?city_id.join(''):'',
                            // city_id: this.formValidate.city_id,
                            remark: this.formValidate.remark,
                        }
                        patientindexpatientadd(config).then(()=>{
                                this.$Message.success('登记成功')
                                this.modal = false
                                this.$emit('askData')
                            }
                        )
                    }
                })
            },
            
            // 监听时间
            handleChangeBirthday(e) {
                if (e !== "") {
                    this.formValidate.age = this.$Date().format("YYYY") - this.$Date(e).format("YYYY");
                }
            },
            ins(e) {
                return parseInt(e)
            },
            inputblurmin(age) {
                this.formValidate.birthday = this.$Date().subtract(age, 'year').format("YYYY")
            },
            cancel () {
                this.modal = false
                this.$refs.formValidate.resetFields();
            },
            initial(){
                this.modal = true
                this.formValidate = {
                    user_name: '',
                    gender: '',
                    clinic_id: '',
                    patient_card_id: '',
                    mobile: '',
                    wx_name: '',
                    birthday: '',
                    age: null,
                    source_channel_id: '',
                    city_id: '',
                    remark: '',
                },
                this.city_list = []
                this.$refs.formValidate.resetFields();
            },
            /* @函数功能: 请求数据 */
            askData () {
            },
            handleQueryText(query) {
                if (query !== '') {
                    if (parseFloat(query).toString() !== 'NaN') query = query.slice(6, query.length)
                    return new Promise(resolve => {
                        setTimeout(() => {
                            searchCity({
                                keywords: query
                            }).then(res => {
                                if (res.list && res.list.length > 0) {
                                    let list = res.list.map(item => {
                                        return {
                                            key: item.id + query,
                                            id: item.id,
                                            name: item.name
                                        };
                                    })
                                    this.city_list = list
                                }
                                resolve(res.data)
                            })
                        }, 200)
                    })
                }
            },
        },
        /* 挂载完成能访问DOM元素 */
        mounted () {}
    }
</script>

<style scoped>

</style>
